
<template>
  <!-- 主要放html元素 页面结构-->
  <div>
        <mt-header fixed title="my first Vue" id="fv"></mt-header>
        <div v-if="isshow" id="back">
            <a href="javascript:void(0);" @click="backto">返回</a>
        </div>
		<router-view></router-view> 
        <nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">消息</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar">
				<span class="mui-icon mui-icon-contact">
                    <span id="badge" class="mui-badge">0</span>
                </span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>

  </div>
</template>
<script>
import {vm,COUNTS} from './components/kits/vm.js';
//注册COUNT这个常量代表的事件（count是事件名）
vm.$on(COUNTS,function(count){
   var badge = document.getElementById('badge');
   badge.innerText =parseInt(badge.innerText) +count;
})

//负责到处。ve组件对象(它本质上是一个Vue对象)

export default{//es6导出方法
    data(){
        return{
            msg:'hello vuejs',
            isshow:false
        }
    },
    watch:{
        '$route':function(newroute,oldroute){
           if(newroute.path.toLowerCase() == '/home'){
               this.isshow = false;
           }else{
               this.isshow = true;
           }
        }
    },
    methods:{
        backto(){
        this.$router.go(-1);
    },
      tip:function(){
          Toast('提示信息O(∩_∩)O哈哈~');
      }
    },
    
    created(){

    }
}
</script>
<style scoped>

#fv{
    font-size: 25px;
}
/*写的css代码 只是在当前组件页面上有效，不会影响其他组件*/
#back{
    width: 60px;
    position: absolute;
    top: 10px;
    left:10px;
    z-index: 101;
}
#back a{
    color: white;
    font-size:15px;
    font-weight: bold;
   
}
</style>
